<template>
	<view class="Classification" :class='equipment'>
		<view class="Classification_left">
			<view class="Classification_left_item" v-for="(item,index) in classifyList" :key="index"
				:style='item.id === classifyListId?"background-color: #fff;color: #ff6000;":""'
				@click="classifyListTab(item.id)">
				{{item.name}}
			</view>
		</view>
		<view class="Classification_right">
			<view class="Classification_right_top">


				<view class="Classification_right_top_item" @click="salesSortFun">
					<p>销量排序</p>
					<uni-icons type="up" v-if="sort === 'sales_desc'"></uni-icons>
					<uni-icons type="down" v-if="sort === 'sales_asc'"></uni-icons>
				</view>



				<view class="Classification_right_top_item" @click="marketpriceSortFun">
					<p>价格排序</p>
					<uni-icons type="up" v-if="sort === 'marketprice_desc'"></uni-icons>
					<uni-icons type="down" v-if="sort === 'marketprice_asc'"></uni-icons>
				</view>


			</view>
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="Classification_right_bottom"
				@scrolltolower="lower">
				<view class="Classification_right_bottom_item" v-for="item,index in commodityList" :key="index"
					@click="goFun(`/pages/home/commodity_details/commodity_details?id=${item.id}`)">
					<image :src="item.thumb" mode=""></image>
					<view class="Classification_right_bottom_item_right">
						<view class="Classification_right_bottom_item_right_title">
							{{item.title}}
						</view>
						<view class="Classification_right_bottom_item_right_marketprice">
							￥{{item.marketprice}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		api_index_get_goods_cate_list,
		api_index_get_goods_list
	} from '@/api/home.js'
	export default {
		data() {
			return {
				equipment: '',
				classifyList: [],
				classifyListId: 0,
				commodityList: [],
				scrollTop: 0,
				page: 1,
				sort: '',
				salesSortNum: 0,
				marketpriceSortNum: 0
			};
		},
		onLoad(e) {
			this.classifyListId = e.id;
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
					this.api_index_get_goods_cate_listFun();
					this.api_index_get_goods_listFun();
				},
				fail: () => {
					uni.reLaunch({
						url: '/pages/login/login'
					});
				}
			});
		},
		onShow() {


		},
		methods: {
			goFun(url) {
				uni.navigateTo({
					url
				})
			},
			marketpriceSortFun() {
				this.page = 0;
				this.commodityList = [];
				if (this.marketpriceSortNum === 2) {
					this.marketpriceSortNum = 0;
					this.sort = '';
				} else {
					if (this.marketpriceSortNum === 0) {
						this.sort = 'marketprice_desc';
					} else {
						this.sort = 'marketprice_asc';
					}
					this.marketpriceSortNum++
				}
				this.api_index_get_goods_listFun();
			},
			salesSortFun() {
				this.page = 0;
				this.commodityList = [];
				if (this.salesSortNum === 2) {
					this.salesSortNum = 0;
					this.sort = '';
				} else {
					if (this.salesSortNum === 0) {
						this.sort = 'sales_desc';
					} else {
						this.sort = 'sales_asc';
					}
					this.salesSortNum++
				}
				this.api_index_get_goods_listFun();
			},
			classifyListTab(id) {
				this.sort = '';
				this.classifyListId = id;
				this.page = 0;
				this.commodityList = [];
				this.api_index_get_goods_listFun();
			},
			lower(e) {
				this.page++;
				this.api_index_get_goods_listFun();
			},
			async api_index_get_goods_listFun() {
				let up = {
					cate_id: this.classifyListId,
					sort: this.sort,
					keywords: '',
					page: this.page
				}
				let data = await api_index_get_goods_list(up);
				if (data.error === 0) {
					data.list.forEach(item => {
						this.commodityList.push(item);
					})
				} else {
					return
				}
				console.log(data);
			},
			async api_index_get_goods_cate_listFun() {
				// this.classifyList = [];
				let data = await api_index_get_goods_cate_list();
				data.list.forEach(item => {
					this.classifyList.push(item);
				})
			}
		}
	}
</script>

<style lang="scss">
	.H5 {
		height: calc(100vh - 88rpx);
	}

	.App {
		height: calc(100vh);
	}

	.Classification {
		width: 100%;
		display: flex;
		justify-content: space-between;
		background-color: #f6f6f6;

		.Classification_left {
			width: 30%;
			height: 100%;
			background-color: #F9F9F9;
			overflow-y: auto;

			.Classification_left_item {
				width: 100%;
				height: 80rpx;
				text-align: center;
				line-height: 80rpx;
				font-size: 26rpx;
			}
		}

		.Classification_right {
			width: 70%;
			height: 100%;
			background-color: #fff;
			display: flex;
			flex-direction: column;

			.Classification_right_top {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-around;
				line-height: 80rpx;
				font-size: 26rpx;

				.Classification_right_top_item {
					display: flex;
					width: 200rpx;
					// justify-content: center;
					padding-left: 40rpx;
				}
			}

			.Classification_right_bottom {
				width: 100%;
				flex: 1;
				padding: 20rpx;
				overflow-y: auto;
				box-sizing: border-box;
				background-color: #F4F4F4;

				.Classification_right_bottom_item {
					width: 100%;
					height: 180rpx;
					margin-bottom: 20rpx;
					display: flex;
					padding: 0 20rpx;
					align-items: center;
					box-sizing: border-box;
					background-color: #fff;
					border-radius: 10rpx;


					image {
						width: 140rpx;
						height: 140rpx;
					}

					.Classification_right_bottom_item_right {
						height: 100%;
						flex: 1;
						padding: 0 0 0 30rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-around;

						.Classification_right_bottom_item_right_title {
							padding: 0 10rpx 0 0;
							width: 270rpx;
							text-overflow: ellipsis;
							text-wrap: nowrap;
							overflow: hidden;
							font-size: 24rpx;
							font-family: 'PingFang SC';
							font-weight: 500;
							color: #333;

						}

						.Classification_right_bottom_item_right_marketprice {
							width: 100%;
							font-size: 26rpx;
							font-weight: 500;
							color: #ff1e00;
						}
					}
				}



			}
		}






	}
</style>